<template>
  <div>
    <!--问卷调查-->
    <content-header :title="routeItem.title"></content-header>
    <div class="title xui-margin-top-md">
      <span class="xui-margin-left-sm">您好！此次调查时希望了解您对长沙博物馆的真实看法和体验，此问卷为匿名填写，所有信息只作为学术研究使用。衷心感谢您对此次调查的支持！</span>
    </div>
    <!-- <div class="form-group xui-padding-md">
      <el-form ref="form" :model="form">
        <div>
          <span>1、您的性别？（必选）</span>
          <el-radio-group v-model="form.sex" class="xui-margin-vertical-md">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>2、您的年龄？（必选）</span>
          <el-radio-group v-model="form.age" class="xui-margin-vertical-md">
            <el-radio label="18岁以下"></el-radio>
            <el-radio label="18-24岁"></el-radio>
            <el-radio label="24-25岁"></el-radio>
            <el-radio label="46-60岁"></el-radio>
            <el-radio label="60岁以上"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>3、您来自？（必选）</span>
          <el-radio-group v-model="form.native" class="xui-margin-vertical-md">
            <el-radio label="湖南省长沙市"></el-radio>
            <el-radio label="长沙市外湖南地区"></el-radio>
            <el-radio label="湖南省外中国地区"></el-radio>
            <el-radio label="国外"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>4、您受教育的程度？（必选）</span>
          <el-radio-group v-model="form.record" class="xui-margin-vertical-md">
            <el-radio label="高中及以下"></el-radio>
            <el-radio label="大专、高职、技校"></el-radio>
            <el-radio label="大学本科"></el-radio>
            <el-radio label="硕士及以上"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>5、您的职业？（必选）</span>
          <el-radio-group v-model="form.job" class="xui-margin-vertical-md">
            <el-radio label="党政机关"></el-radio>
            <el-radio label="企、事业单位"></el-radio>
            <el-radio label="个体户、自由职业者"></el-radio>
            <el-radio label="硕士及以上"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>6、您是如何来长沙博物馆参观的？（必选）</span>
          <el-radio-group v-model="form.way" class="xui-margin-vertical-md">
            <el-radio label="独自参观"></el-radio>
            <el-radio label="和朋友家人一起"></el-radio>
            <el-radio label="单位组织"></el-radio>
            <el-radio label="与旅游团队一起"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>7、您来博物馆参观主要是为了？（必选）</span>
          <el-radio-group v-model="form.reason" class="xui-margin-vertical-md">
            <el-radio label="兴趣爱好"></el-radio>
            <el-radio label="旅游观光"></el-radio>
            <el-radio label="教育子女"></el-radio>
            <el-radio label="专业研究"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>8、您希望博物馆提供哪些参与体验？（必选）</span>
          <el-checkbox-group v-model="form.experience" class="xui-margin-vertical-md">
            <el-checkbox label="文化节" name="experience"></el-checkbox>
            <el-checkbox label="电子互动游戏" name="experience"></el-checkbox>
            <el-checkbox label="手工体验" name="experience"></el-checkbox>
            <el-checkbox label="文物鉴赏课程" name="experience"></el-checkbox>
            <el-checkbox label="其他" name="experience"></el-checkbox>
          </el-checkbox-group>
          <el-input placeholder="填写其他" class="xui-margin-bottom-md"></el-input>
        </div>
        <div>
          <span>9、您希望博物馆提供什么主题的展览？（必选）</span>
          <el-checkbox-group v-model="form.themes" class="xui-margin-vertical-md">
            <el-checkbox label="历史文化" name="themes"></el-checkbox>
            <el-checkbox label="现代艺术" name="themes"></el-checkbox>
            <el-checkbox label="电子动漫" name="themes"></el-checkbox>
            <el-checkbox label="航空航天" name="themes"></el-checkbox>
            <el-checkbox label="服饰品牌" name="themes"></el-checkbox>
            <el-checkbox label="其他" name="themes"></el-checkbox>
          </el-checkbox-group>
          <el-input placeholder="填写其他" class="xui-margin-bottom-md"></el-input>
        </div>
        <div>
          <span>10、本次参观您最满意的是？（必选）</span>
          <el-radio-group v-model="form.good" class="xui-margin-vertical-md">
            <el-radio label="展览选题"></el-radio>
            <el-radio label="展览形式设计"></el-radio>
            <el-radio label="讲解接待"></el-radio>
            <el-radio label="便民服务"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>11、您最喜欢什么样的讲解方式？（必选）</span>
          <el-radio-group v-model="form.explain" class="xui-margin-vertical-md">
            <el-radio label="人工讲解"></el-radio>
            <el-radio label="专题讲座"></el-radio>
            <el-radio label="电子讲解器"></el-radio>
            <el-radio label="不需要讲解"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>12、通过此次参观，您对长沙博物馆的整体印象？（必选）</span>
          <el-radio-group v-model="form.impress" class="xui-margin-vertical-md">
            <el-radio label="非常满意"></el-radio>
            <el-radio label="满意"></el-radio>
            <el-radio label="不满意"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="非常不满意"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>13、您在本馆停留的时间是？（必选）</span>
          <el-radio-group v-model="form.times" class="xui-margin-vertical-md">
            <el-radio label="1小时以内"></el-radio>
            <el-radio label="1-2小时"></el-radio>
            <el-radio label="2-3小时"></el-radio>
            <el-radio label="3小时以上"></el-radio>
          </el-radio-group>
        </div>
        <div>
          <span>14、您对长沙博物馆有哪些意见或建议？（必选）</span>
          <el-radio-group v-model="form.opinion" class="xui-margin-vertical-md">
            <el-radio label="有"></el-radio>
            <el-radio label="没有"></el-radio>
          </el-radio-group>
          <el-input placeholder="填写其他"></el-input>
        </div>
        <div class="btn xui-margin-top-lg">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div> -->

    <iframe id="mainIframe" v-if="url" :src="url" frameborder="1" width="100%" :height="500 + 'px'" onload="this.height=document.body.scrollHeight+20"></iframe>
  </div>
</template>

<script>
import ContentHeader from "../../../components/widge/content-header";
import { getPaper } from "@/api/detail";

export default {
  components: { ContentHeader },
  data() {
    return {
      url: "",
      iframeHeight: "",
      form: {
        sex: "",
        age: "",
        native: "",
        record: "",
        job: "",
        way: "",
        reason: "",
        experience: [],
        themes: [],
        good: "",
        explain: "",
        impress: "",
        times: "",
        opinion: ""
      }
    };
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    }
  },
  mounted() {
    getPaper().then(res => {
      this.url = res.data;
    });
  }
};
</script>

<style lang='less' scoped>
.title {
  height: 58px;
  line-height: 58px;
  background-color: #f4efd9;
}

.title span {
  font-size: 12px;
  color: #e02a29;
}

.form-group {
  background-color: #f8f8f0;
  span {
    display: block;
    font-size: 18px;
    color: #bf9a53;
  }
  .el-input {
    width: 87%;
  }
  .btn {
    text-align: center;
  }
  .el-button {
    display: inline-block;
    width: 138px;
    height: 38px;
    font-size: 14px;
    background-color: #dbad23;
    border-color: #dbad23;
  }
}
</style>
